import React from 'react';
import {Menu, Icon, Row, Col, Tabs, Modal, message, Form, Input, Button, CheckBox} from 'antd';
import {BrowserRouter,Router,HashRouter,Route,Link,hashHistory} from 'react-router-dom';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class MobileHeader extends React.Component {
    constructor() {
        super();
        this.state = {
            current: 'top',
            modaVisible: false,
            action: 'login',
            hasLogined: false,
            userNickName: '',
            userId: 0
        }
    }

    handleClick(e) {
        if (e.key == "register") {
            this.setModalVisible(true);
        } else {
            this.setModalVisible(false);
            this.setState({
                current: e.key
            });
        }
    }

    login(){

    }

    setModalVisible(value) {
        this.setState({
            modaVisible: value
        });
    }

    handleSubimit(e) {
        //页面向数据提交
        e.preventDefault();
        var myFetchOptions = {
            method: 'GET'
        };

        //获取表单数据
        var formData;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                formData = values;
            }
        });
        //fetch请求
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=register"
            + "&username=" + formData.userName + "&password=" + formData.password
            + "&r_confirmPassword=" + formData.confirm, myFetchOptions).then(response => response.json()).then(json => {
            this.setState({
                userNickName: json.NickUserName,
                userId: json.UserId,
            })
        });
        message.success('请求成功！');
        this.setModalVisible(false);
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const userShow = this.state.hasLogined?
            <Icon type='inbox'/>
            :
            <Icon type='setting' onClick={this.setModalVisible.bind(this,true)} />
        return (
            <div id="mobileHeader">
                <header>
                    <img src="./src/images/news.png" alt="新闻网" />
                    <span>新闻网</span>
                    {userShow}
                    <Modal
                        title='用户中心'
                        wrapClassName='vertical-center-modal'
                        visible={this.state.modaVisible}
                        onCancel={this.handleClick.bind(this)}
                        onOk={this.handleClick.bind(this)}
                    >

                        <Tabs type='card'
                              defaultActiveKey="1">
                            <TabPane
                                tab="注册"
                                key='1'
                            >
                                <Form onSubmit={this.handleSubimit.bind(this)}>
                                    <FormItem
                                        label='用户名'
                                        hasFeedback
                                    >
                                        {getFieldDecorator('userName', {
                                            rules: [{
                                                type: 'string',whitespace:true,min:3,max:12, required: true, message: '用户名只包含3-12位字符',
                                            }],
                                        })(<Input/>)}
                                    </FormItem>
                                    <FormItem label='密码'>
                                        {getFieldDecorator('password', {
                                            rules: [{
                                                required: true, message: '请输入您的密码',
                                            }],
                                        })(<Input type="password"/>)}
                                    </FormItem>

                                    <FormItem label='确认密码'>
                                        {getFieldDecorator('confirm', {
                                            rules: [{
                                                required: true, message: '请再次输入您的密码',
                                            }],
                                        })(<Input type="password"/>)}
                                    </FormItem>
                                    <Button type='primary' htmlType='submit'>注册</Button>
                                </Form>
                            </TabPane>
                        </Tabs>

                    </Modal>
                </header>
            </div>
        )
    }
}

export default MobileHeader = Form.create()(MobileHeader);